<template>  
	<view class="user">
		<!-- 头部导航 -->
		<nav-bar backState="2000" bgColor="#4c8aed" title="我的" />
		<view class="user-section">
			<h-icon class-name="ico_nav" src="nav_bg2" type="jpg" mode="heightFix"></h-icon>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.userIcon || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box" @click="navTo(hasLogin?'/userPages/set':loginUrl)">
					<text class="username">{{ !hasLogin?'请登录/注册您的账号':userInfo.nickName}}</text>
				</view>
				<view v-if="hasLogin" class="shezhi" @click="navTo('/userPages/set')">
					<h-icon class-name="setting" src="mine/shezhi" mode="heightFix" />
				</view>
			</view>
		</view>
		<view class="pure_top"></view>
		<!-- 订单tabbar -->
		<view class="statusList">
			<view class="item"
				v-for="(item, index) in orderStatus"
				:key="index"
				@click="navTo(item.path)">
				<view class="value">{{item.value||'0'}}</view>
				<view class="label">{{item.label}}</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order-wrap">
			<view class="tit-bar" @click="navToTab(4)">
				<text class="tit">我的订单</text>
				<text class="tip">全部订单 >></text>
			</view>
			<view class="order-section">
				<view
					v-for="(item,index) in navList"
					:key="index"
					class="order-item"
					@click="navToTab(index)"
					hover-class="common-hover"
					:hover-stay-time="50"
				>
					<view class="order-icon">
						<text v-if="item.dot&&hasLogin" class="dot">{{item.dot}}</text>
						<h-icon class-name="icon" :src="'mine/'+item.icon" mode="heightFix" />
					</view>
					<text class="text" v-text="item.text" />
				</view>
			</view>
		</view>
  </view>  
</template>  
<script>  
	import listCell from '@/components/mix-list-cell';
	import { mapState } from 'vuex';  
	export default {
		components: {
			listCell
		},
		data(){
			return {
				titleBar: null, // 导航栏高度
				totalNum: 0,
				orderStatus:[
					{label:'余额',value:'0',path:'/userPages/balance'},
					{label:'积分',value:'0'}, //path:'/userPages/integral'
					{label:'优惠券',value:'0'}
				],
				navList: [
					{
						state: 1,
						text: '待接单',
						icon: 'mine-icon-daijiedan',
						dot:'',
					},
					{
						state: 2,
						text: '待服务',
						icon: 'mine-icon-daifahuo',
						dot:'',
					},
					{
						state: 3,
						text: '服务中',
						icon: 'mine-icon-daifukuan',
						dot:'',
					},
					{
						state: 4,
						text: '已完成',
						icon: 'mine-icon-bufenfh',
						dot:'',
					}
				],
				loginUrl: '/pages/public/login' // 登录地址
			}
		},
		onLoad() {
			this.titleBar = this.titleBarHeight
		},
		onShow(){
			getApp().globalData.orderRefresh = true // 是否刷新
		},
		watch:{
			hasLogin: {
				handler(newVal) {
					console.log('login'+newVal)
					if(newVal){
						// this.getHistory() // 订单数量
						// this.getSearchAccount() // 金豆总数
					} else {

					}
				},
				immediate: true
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			async getHistory(){
				const { code,data } = await this.$apis.historyCount()
        if(code == 200) {
          const {waitSendCount,waitReceiveCount,waitEvaluateCount,portionSendCount} = data
					this.navList[1].dot = waitSendCount // 待发货
					this.navList[3].dot = waitReceiveCount // 待收货
					this.navList[4].dot = waitEvaluateCount // 待评价
					this.navList[2].dot = portionSendCount // 部分发货
        }
			},
			async getSearchAccount(){
				const { code,data } = await this.$apis.searchAccount()
        if(code == 200) {
          const {totalNum} = data.jinDouAccount
					this.totalNum = totalNum
        }
			},
			navTo(url){
				if(!url) return
				if(!this.hasLogin&&url!==this.loginUrl){
					this.$api.msg('登录解锁更多功能！')
					setTimeout(() => {
						uni.navigateTo({ url:this.loginUrl })
					}, 1000);
				} else {
					uni.navigateTo({ url }) 
				}
			},
			navToTab(orderStatus){
				getApp().globalData.orderStatus = orderStatus
				uni.switchTab({url:'/pages/order/order'})
			}
		}  
	}  
</script>  
<style lang='scss' scope="scoped">
.user{
	/deep/ {
		.mix-list-cell{
			.cell-tit{
				font-weight: bold;
				font-size: 30upx;
			}
		}
	}
	.pure_top{
		height: 108upx;
		&:after{
			height: 108upx;
		}
	}
	.statusList{
		margin-top: -90upx;
	}
	.tit-bar{
		height: 100upx;
	}
}
.flex-center {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.section{
	display:flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}
.user-section{
	padding: 27upx 25upx 20upx;
	overflow: hidden;
	position:relative;
	background-color: #4083F0;
}
.user-info-box{
	display:flex;
	align-items:center;
	position:relative;
	z-index: 1;
	.portrait{
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		margin-right: 22upx;
    background: #f3f3f3;
		image{display: block;}
	}
	.username{
		font-size: 30upx;
		font-weight: 500;
		color: #000;
	}
	.shezhi{
		margin-left: auto;
		.setting{
			width: 50upx;
			height: 50upx;
		}
	}
}
.order-wrap{
	background: #fff;
	margin: 20upx 24upx;
	border-radius: 10upx;
	/deep/ .content{
		background: none;
	}
}
.order-section{
	@extend .section;
	padding: 28upx 0;
	.order-item{
		@extend .flex-center;
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		position: relative;
		.dot{
			min-width: 32upx;
			background: #FA723A;
			border-radius: 50%;
			text-align: center;
			padding: 5upx 6upx;
			font-size: 22upx;
			color: #fff;
			line-height: 1;
			position: absolute;
			left: 40upx;
			top: -18upx;
		}
	}
	.order-icon{
		margin-bottom: 25upx;
		height: 60upx;
		width: 60upx;
		position: relative;
		
	}
	/deep/ {
		.icon{
			height: 60upx;
		}
	}
	.text{
		font-size: 24upx;
		color: #333;
	}
}

</style>
